<template>
  <div class="liteflow-toolbar">
    <div class="liteflow-toolbar__group">
      <button class="liteflow-toolbar__btn" :disabled="!canUndo" @click="undo">
        撤销
      </button>
      <button class="liteflow-toolbar__btn" :disabled="!canRedo" @click="redo">
        重做
      </button>
    </div>
    <div class="liteflow-toolbar__group">
      <button class="liteflow-toolbar__btn" @click="zoomIn">放大</button>
      <button class="liteflow-toolbar__btn" @click="zoomOut">缩小</button>
      <button class="liteflow-toolbar__btn" @click="resetZoom">重置</button>
      <button class="liteflow-toolbar__btn" @click="fitView">自适应</button>
    </div>
    <div class="liteflow-toolbar__group">
      <button class="liteflow-toolbar__btn" @click="exportJSON">导出 JSON</button>
    </div>
    <div class="liteflow-toolbar__group liteflow-toolbar__group--custom" v-if="customWidgets.length">
      <component
        v-for="(Widget, index) in customWidgets"
        :key="index"
        :is="Widget"
        :flow-graph="flowGraph"
      />
    </div>
  </div>
</template>

<script>
import { history, getModel, MIN_ZOOM, MAX_ZOOM } from '../core';

export default {
  name: 'ToolBar',
  props: {
    flowGraph: {
      required: true,
    },
    customWidgets: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      canUndo: false,
      canRedo: false,
    };
  },
  created() {
    this.updateState();
    this.flowGraph.on('toolBar:forceUpdate', this.updateState);
  },
  beforeDestroy() {
    this.flowGraph.off('toolBar:forceUpdate', this.updateState);
  },
  methods: {
    updateState() {
      this.canUndo = history.canUndo();
      this.canRedo = history.canRedo();
    },
    undo() {
      history.undo();
      this.updateState();
    },
    redo() {
      history.redo();
      this.updateState();
    },
    zoomIn() {
      const current = this.flowGraph.zoom();
      const next = Math.min(MAX_ZOOM, Number((current + 0.1).toFixed(2)));
      this.flowGraph.zoomTo(next);
    },
    zoomOut() {
      const current = this.flowGraph.zoom();
      const next = Math.max(MIN_ZOOM, Number((current - 0.1).toFixed(2)));
      this.flowGraph.zoomTo(next);
    },
    resetZoom() {
      this.flowGraph.zoomTo(1);
    },
    fitView() {
      this.flowGraph.zoomToFit({ minScale: MIN_ZOOM, maxScale: 1 });
    },
    exportJSON() {
      const model = getModel();
      if (!model) {
        return;
      }
      const content = JSON.stringify(model.toJSON(), null, 2);
      const blob = new Blob([content], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'liteflow.json';
      a.click();
      URL.revokeObjectURL(url);
    },
  },
};
</script>

<style lang="less" scoped>
.liteflow-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
}

.liteflow-toolbar__group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.liteflow-toolbar__group--custom {
  margin-left: auto;
}

.liteflow-toolbar__btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #d6dbe3;
  background: #f7f9fc;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}
</style>

